<template>
	<view class="page">
		<!-- search -->
		<view class=""
			style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
			<view class="" @click="popBack()">
				<text class="iconfont icon-arrow-left" style="font-size: 16px;font-weight: bold;"></text>
				<text style="font-size: 16px;">课程管理</text>
			</view>
		</view>
		<!-- fillter -->
		<view style="background-color: #FFFFFF">
			<!-- search -->
			<view style="display: flex;flex-direction: row;padding-left: 12px;margin-left: 12px;
			border-color: #ebebeb;
			overflow: hidden;
			margin-right: 12px;border-width: 1px;border-style: solid;border-radius: 4px;">
				<input type="text" value="" placeholder="请输入大学 课程 学分"
					style="font-size: 14px;height: 35px;background-color: #F4F5F7;flex: 1;" />
				<view
					style="display: flex;justify-content: center;align-items: center;background-color: #007AFF;padding-left: 10px;padding-right: 10px;">
					<text style="font-size: 14px;color:#FFFFFF;">搜索</text>
				</view>
			</view>

			<!-- row1 -->
			<view style="display: flex;flex-direction: row;padding: 12px;padding-bottom: 0;" v-if="false">
				<view style="height: 35px;border-style: solid;border-width: 1px;flex: 1;display: flex;
					border-radius: 4px;overflow: hidden;border-color: #999999;
					align-items: center;padding-left: 5px;padding-right: 5px;">
					<text style="font-size: 14px;color:#333333;flex: 1;display:block;text-align: center;">选项</text>
					<text class="iconfont icon-arrow-down" style="font-size: 20px;color: #999999;"></text>
				</view>
				<view style="width: 12px;" />
				<view style="height: 35px;border-style: solid;border-width: 1px;flex: 1;display: flex;
					border-radius: 4px;overflow: hidden;border-color: #999999;
					align-items: center;padding-left: 5px;padding-right: 5px;">
					<text style="font-size: 14px;color:#333333;flex: 1;display:block;text-align: center;">选项</text>
					<text class="iconfont icon-arrow-down" style="font-size: 20px;color: #999999;"></text>
				</view>
				<view style="width: 12px;" />
				<view style="height: 35px;border-style: solid;border-width: 1px;flex: 1;display: flex;
					border-radius: 4px;overflow: hidden;border-color: #999999;
					align-items: center;padding-left: 5px;padding-right: 5px;">
					<text style="font-size: 14px;color:#333333;flex: 1;display:block;text-align: center;">选项</text>
					<text class="iconfont icon-arrow-down" style="font-size: 20px;color: #999999;"></text>
				</view>
			</view>
			<!-- row2 -->
			<view style="display: flex;flex-direction: row;padding: 12px;" v-if="false">
				<view style="height: 35px;border-style: solid;border-width: 1px;flex: 1;display: flex;
					border-radius: 4px;overflow: hidden;border-color: #999999;
					align-items: center;padding-left: 5px;padding-right: 5px;">
					<text style="font-size: 14px;color:#333333;flex: 1;display:block;text-align: center;">选项</text>
					<text class="iconfont icon-arrow-down" style="font-size: 20px;color: #999999;"></text>
				</view>
				<view style="width: 12px;" />
				<view style="height: 35px;border-style: solid;border-width: 1px;flex: 1;display: flex;
					border-radius: 4px;overflow: hidden;border-color: #999999;
					align-items: center;padding-left: 5px;padding-right: 5px;">
					<text style="font-size: 14px;color:#333333;flex: 1;display:block;text-align: center;">选项</text>
					<text class="iconfont icon-arrow-down" style="font-size: 20px;color: #999999;"></text>
				</view>
				<view style="width: 12px;" />
				<view style="height: 35px;border-style: solid;border-width: 1px;flex: 1;display: flex;
					border-radius: 4px;overflow: hidden;border-color: #999999;
					align-items: center;padding-left: 5px;padding-right: 5px;opacity: 0;">
					<text style="font-size: 14px;color:#333333;flex: 1;display:block;text-align: center;">选项</text>
					<text class="iconfont icon-arrow-down" style="font-size: 20px;color: #999999;"></text>
				</view>
			</view>
		</view>

		<!-- line -->
		<view style="height: 1px;background-color: #ebebeb;margin-top: 12px;" />
		<!-- list -->
		<view class="" style="flex: 1;background-color: #FFFFFF;overflow-y: auto;">
			<!-- cell -->
			<view @click="loadDetial(item.id)" v-for="(item,idx) in list" :key="idx" style="padding: 12px;background-color: #FFFFFF;">
				<!-- row1 -->
				<view style="display: flex;align-items: center;flex-direction: row;">
					<view class="" style="display: flex;align-items: center;flex: 1;">
						<text style="font-size: 16px;">{{item.courseName}}</text>
					</view>
					<view style="
					display: flex;align-items: center; background-color: #ffffff;
					padding: 3px 10px;border-style: solid;border-width: 1px;border-color: #ff0000;max-width: 90px;">
						<text style="text-align: center;font-size: 12px;color: #FF0000;display: block;">{{item.credit}}学分</text>
					</view>
				</view>
				<!-- row2 -->
				<view style="flex: 1;flex-direction: column;display: flex;overflow: hidden;">
					<text style="font-size: 12px;color: #999999;margin-top: 5px;">学科类别: {{item.courseType}} | 课程代码: {{item.courseCode}}</text>
				</view>
				<!-- row3 -->
				<view style="flex: 1;flex-direction: row;display: flex;overflow: hidden;">
					<text style="font-size: 12px;margin-top: 5px;color: #007AFF;">{{item.projectName}}</text>
				</view>
				<!-- line -->
				<view style="height: 1px;background-color: #ebebeb;margin-top: 10px;" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		courseList
	} from "../../api/workbench.js"
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 30,
				list: []
			}
		},
		created() {
			this.netCourseList()
		},
		methods: {
			popBack() {
				uni.navigateBack({

				})
			},
			loadDetial(data) {
				uni.navigateTo({
					url: "/pages/course/course_detail"
				})
			},
			netCourseList() {
				let fi = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				};
				let self = this;
				courseList(fi).then(res => {
					let {
						data
					} = res;
					let {
						record
					} = data;
					self.list = record;
					console.warn(JSON.stringify(res))
				}).catch(e => {
					console.error(e)
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		background-color: #f4f5f7;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		display: flex;
	}
</style>
